<template>
    <div>
        <div class="header" style="background-color: white">
            <el-page-header @back="goBack" content="用印统计">
            </el-page-header>
        </div>
        <el-divider></el-divider>
        <el-form>
            <el-container>
                <el-form-item>
                    <el-input v-model="official.case_no" style="width: 180px" clearable placeholder="案号" ></el-input>
                </el-form-item>
                <el-form-item style="margin-left: 20px">
                    <el-select v-model="official.status" clearable placeholder="请选择审批状态">
                        <el-option
                                v-for="item in approve"
                                :key="item.approveCode"
                                :label="item.approveType"
                                :value="item.approveCode">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item style="margin-left: 20px">
                    <el-date-picker
                            v-model="official.starttime"
                            type="date"
                            placeholder="领用日期开始时间" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item style="margin-left: 20px">
                    <el-date-picker
                            v-model="official.endtime"
                            type="date"
                            placeholder="领用日期结束时间" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>

                <el-form-item style="margin-left: 20px">
                    <el-input v-model="official.submiter" clearable placeholder="领用人"></el-input>
                </el-form-item>

                <el-form-item style="margin-left: 20px">
                    <el-button type="primary" @click="List()" icon="el-icon-search">检索</el-button>
                </el-form-item>

                <el-form-item style="margin-left: 20px">
                    <el-button type="primary" @click="exportss()" icon="el-icon-upload">导出</el-button>
                </el-form-item>
            </el-container>
        </el-form>
        <el-divider></el-divider>
        <h1 style="text-align:center;margin-bottom: 30px;margin-top: 50px">用印统计(合计:{{officialData.length}}个)</h1>
        <el-table
                :data="officialData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                border
                style="width: 100%;font-size: 18px;"
        >
            <el-table-column
                    prop="case_no"
                    label="案号">
            </el-table-column>
            <el-table-column
                    prop="createtime"
                    label="领用日期"
                    :formatter="formatDateTime"
            >
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="审批状态">
                <template slot-scope="scope">
                    {{approve[scope.row.status-0-1].approveType}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="submiter"
                    label="领用人">
            </el-table-column>
            <el-table-column
                    prop="file_name"
                    label="用印事项">
            </el-table-column>
        </el-table>
        <el-divider></el-divider>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="officialData.length"> //这是显示总共有多少数据，
        </el-pagination>
    </div>
</template>

<script>
    import  OfficialService from '../../../model/ww/official/OfficialService'
    const officialService=OfficialService.getInstance();

    export default {
        name: "Official",
        data(){
            return {
                official:{}, //用印对象,
                approve:[
                    {
                        approveCode:1,
                        approveType:'审批中'
                    },
                    {
                        approveCode:2,
                        approveType:'审批通过'
                    },
                    {
                        approveCode:3,
                        approveType:'审批未通过'
                    }
                ], //审批状态
                officialData:[], //表格数据
                currentPage: 1, //初始页
                pagesize: 5,  //每页的数据
            }
        },
        methods:{
            List(){
                officialService.list(this.official).then((response)=>{
                    this.officialData=response.data.data
                })

            },
            handleSizeChange(size) {
                this.pagesize = size; //每页下拉显示数据

            },
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage; //点击第几页

            },

            formatDateTime(inputTime, mode) {  //格式转换表格中的领用日期
                var date = new Date(inputTime.createtime);
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                var h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                var minute = date.getMinutes();
                var second = date.getSeconds();
                minute = minute < 10 ? ('0' + minute) : minute;
                second = second < 10 ? ('0' + second) : second;
                return mode == undefined ? y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second : y + '-' + m + '-' + d + ' ' + h + ':' + minute;

            },
            exportss(){
                officialService.officialDc().then((response)=>{
                    if(!response){
                        this.$message.error("下载模板文件失败");
                        return false;
                    }
                    const blob = new Blob([response.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});
                    const downloadElement = document.createElement('a');
                    const href = window.URL.createObjectURL(blob);
                    let contentDisposition = response.headers['content-disposition'];  //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
                    let patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
                    let result = patt.exec(contentDisposition);
                    let filename = decodeURI(result[1]);
                    downloadElement.style.display = 'none';
                    downloadElement.href = href;
                    downloadElement.download = filename ; //下载后文件名
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); //点击下载
                    document.body.removeChild(downloadElement); //下载完成移除元素
                    window.URL.revokeObjectURL(href); //释放掉blob对象
                })
            },
            goBack(){
                history.back()
            }
        },
        created(){
            this.List()
        }
    }
</script>

<style scoped>

</style>
